<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="popup">
			<view class="tip">
				 <text>提前结束</text>
			</view>
			<view style="margin-top:30rpx;">
				 <view class="tip" style="font-size: 28rpx;font-weight: 400;">
				 	<image src="@/static/my/zy.png" mode="widthFix"></image>
					提前结束订单将停止服务且没有退款
				 </view>
				<view style="background-color: #F8F8F8;padding: 20rpx;border-radius: 10rpx;margin-top: 20rpx;">
					<textarea v-model="endRemarks" cols="30" rows="10" placeholder="请备注原因…"></textarea>
				</view>
			</view>
			 
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange">
				确认
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	 
	export default {
		name:"woods-popupModal",
		props: {
			 
		},
		 
		data() {
			return {
				visible:false,
				 
				endRemarks:"" 
			};
		},
		 
		methods:{
			 
			 
			/*
			@description 回调事件
			*/ 
			handleChange(){
				if(this.endRemarks){
					this.visible=false
					this.$emit("handleChange",this.endRemarks)
				}else{
					uni.showToast({
						title:'请备注原因…',
						icon:'none'
					})
				} 
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	 
}
 
</style>